<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8" style="padding-right: 10px">
      <el-card class="box-card" shadow="hover">
        <div class="user">
          <img src="../../assets/user.webp" alt="" />
          <div class="userinfo">
            <p class="name">Admin</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <div class="loading">
          <p>上次登录时间<span>2022-7-1</span></p>
          <p>上次登录地点<span>家子</span></p>
        </div>
      </el-card>
      <!-- 表格 -->
      <el-card style="height: auto; margin-top: 20px">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            v-for="(val, key) in tableTo"
            :prop="key"
            :label="val"
            :key="key"
          />
        </el-table>
      </el-card>
    </el-col>
    <!-- 右侧  -->
    <el-col :span="16" style="padding-left: 10px">
      <div class="num">
        <el-card
          class="num-card"
          v-for="item in countData"
          :key="item.name"
          :body-style="{ display: 'flex', padding: 0 }"
        >
          <component
            class="icon"
            :is="item.icon"
            :style="{ background: item.color }"
          />
          <div class="dan">
            <p class="price">¥{{ item.value }}</p>
            <p class="desc">{{ item.name }}</p>
          </div>
        </el-card>
      </div>
      <!-- 图表 -->
      <el-card style="height: 280px">
        <div ref="echart1" style="height: 280px"></div>
      </el-card>
      <div class="graph">
        <el-card style="height: 260px">
          <div ref="echart2" style="height: 260px"></div>
        </el-card>
        <el-card style="height: 260px">
          <div ref="echart3" style="height: 240px"></div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>
<script>
// import { getData } from '../api'
import * as echarts from 'echarts'
// import axios from 'axios'
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
} from 'vue'
export default defineComponent({
  setup() {
    let { proxy } = getCurrentInstance()
    let tableData = ref([])
    let countData = ref([])
    // let EchartData = ref([])
    const tableTo = {
      name: '课程',
      todayBuy: '今日购买',
      monthBuy: '本月购买',
      totalBuy: '总购买',
    }
    // 表格数据---从动态的fastmock获取
    // 表格数据---从动态的fastmock获取
    const getTableList = async () => {
      let res = await proxy.$api.getTableData()
      console.log(res, '1111')
      tableData.value = res.tableData
    }
    // 六个数据---从动态的fastmock获取
    const getCountData = async () => {
      let res = await proxy.$api.getCountData()
      countData.value = res
    }
    // Echart数据 三个
    const getEchartData = async () => {
      let result = await proxy.$api.getEchartData()
      // EchartData.value = res
      let res = result.orderData
      let userRes = result.userData
      let videoRes = result.videoData
      orderData.xData = res.date
      const keyArray = Object.keys(res.data[0])
      const series = []
      keyArray.forEach((key) => {
        series.push({
          name: key,
          data: res.data.map((item) => item[key]),
          type: 'line',
        })
      })
      orderData.series = series
      XOptions.xAxis.data = orderData.xData
      XOptions.series = orderData.series
      // userData进行渲染
      let hEcharts = echarts.init(proxy.$refs['echart1'])
      hEcharts.setOption(XOptions)

      // 柱状图
      userData.xData = userRes.map((item) => item.date)
      userData.series = [
        {
          name: '新增用户',
          data: userRes.map((item) => item.new),
          type: 'bar',
        },
        {
          name: '活跃用户',
          data: userRes.map((item) => item.active),
          type: 'bar',
        },
      ]
      XOptions.xAxis.data = userData.xData
      XOptions.series = userData.series
      // userData进行渲染
      let Echart2 = echarts.init(proxy.$refs['echart2'])
      Echart2.setOption(XOptions)

      // 饼状图
      videoData.series = [
        {
          data: videoRes,
          type: 'pie',
        },
      ]
      pieOptions.series = videoData.series
      let Echart3 = echarts.init(proxy.$refs['echart3'])
      Echart3.setOption(pieOptions)
    }
    onMounted(() => {
      getTableList()
      getCountData()
      getEchartData()
    })

    // 关于echarts的配置****************************************
    // 折线图
    let XOptions = reactive({
      // 图例文字颜色
      textStyle: {
        color: '#333',
      },
      grid: {
        left: '20%',
      },
      // 提示框
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        type: 'category', // 类目轴
        data: [],
        axisLine: {
          lineStyle: {
            color: '#17b3a3',
          },
        },
        axisLabel: {
          interval: 0,
          color: '#333',
        },
      },
      yAxis: [
        {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#17b3a3',
            },
          },
        },
      ],
      color: ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80', '#8d98b3'],
      series: [],
    })
    // 饼状图**************************************
    let pieOptions = reactive({
      tooltip: {
        trigger: 'item',
      },
      color: [
        '#0f78f4',
        '#dd536b',
        '#9462e5',
        '#a6a6a6',
        '#e1bb22',
        '#39c362',
        '#3ed1cf',
      ],
      series: [],
    })
    //
    let orderData = reactive({
      xData: [],
      series: [],
    })
    let userData = reactive({
      xData: [],
      series: [],
    })
    let videoData = reactive({
      series: [],
    })

    // 获取数据 *************************************************

    return {
      tableData,
      tableTo,
      countData,
    }
  },
})
</script>
<style lang="less" scoped>
.home {
  .el-col {
    .el-card {
      div.user {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;
        img {
          width: 150px;
          height: 150px;
          border-radius: 50%;
          margin-right: 40px;
        }
        .userinfo {
          .name {
            font-size: 32px;
            margin-bottom: 10px;
          }
          .access {
            color: #999999;
          }
        }
      }
      .loading {
        p {
          line-height: 28px;
          font-size: 14px;
          color: #999999;
          span {
            color: #666666;
            margin-left: 60px;
          }
        }
      }
    }
    .num {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .el-card {
        width: 30%;
        margin-bottom: 20px;
        .icon {
          width: 80px;
          height: 80px;
          line-height: 80px;
          text-align: center;
          color: white;
          font-size: 30px;
        }
        .dan {
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 15px;
          .price {
            font-size: 30px;
            margin-bottom: 10px;
            line-height: 30px;
            height: 30px;
          }
          .desc {
            color: #999999;
            text-align: center;
          }
        }
      }
    }
    .graph {
      display: flex;
      margin-top: 20px;
      justify-content: space-between;
      .el-card {
        width: 46%;
      }
    }
  }
}
</style>
